
<template>
  <div class="map">
    <div id="map_location" style="height: 800px"></div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return { map: [], lineArr: [] };
  },

  methods: {},

  created() {},

  mounted() {
    this.map = new AMap.Map("map_location", {
      zoom: 11, //级别
      center: [117.077041, 33.633096], //中心点坐标
      viewMode: "3D", //使用3D视图
    });
    // this.marker = new AMap.Marker({
    //   map: this.map,
    //   position: [117.080589, 33.634852],
    //   icon: "https://webapi.amap.com/images/car.png",
    //   offset: new AMap.Pixel(-26, -13), //调整图片偏移
    //   autoRotation: true, //自动旋转
    //   angle: -90, //图片旋转角度
    // });

    //清空已划的线
    this.map.clearMap();
    //写死的数据，可以改成通过ajax动态绘制折线
    this.lineArr.push([117.077934, 33.635584]);
    this.lineArr.push([117.081002, 33.634842]);
    this.lineArr.push([117.080465, 33.634223]);
    // this.lineArr.push([117.08171, 33.633753]);
    this.lineArr.push([117.08053, 33.633945]);
    this.lineArr.push([117.080316, 33.632788]);
    this.lineArr.push([117.079779, 33.63059]);
    this.lineArr.push([117.079437, 33.630308]);

    this.lineArr.push([117.077088, 33.620976]);
    this.lineArr.push([117.026881, 33.629939]);
    this.lineArr.push([116.986374, 33.631625]);
    this.lineArr.push([116.986632, 33.632046]);
    this.lineArr.push([116.987431, 33.632243]);
    this.lineArr.push([116.987383, 33.631671]);
    this.lineArr.push([116.987415, 33.631323]);
    this.lineArr.push([116.988847, 33.631345]);
    this.lineArr.push([116.988732, 33.631491]);
    this.lineArr.push([117.026872, 33.629864]);
    this.lineArr.push([117.077166, 33.620946]);
    this.lineArr.push([117.079489, 33.630595]);
    this.lineArr.push([117.076748, 33.630894]);
    this.lineArr.push([117.078239, 33.637237]);

    // this.lineArr.push([117.079168, 33.630635]);
    //  this.lineArr.push([117.076271, 33.631091]);
    // this.lineArr.push([117.077365, 33.632252]);
    // this.lineArr.push([117.077934, 33.635584]);
    // this.lineArr.push([117.078256, 33.637214]);

    // 绘制轨迹
    var polyline = new AMap.Polyline({
      map: this.map,
      path: this.lineArr,
      strokeColor: "red", //线颜色
      strokeOpacity: 1, //线透明度
      strokeWeight: 3, //线宽
      strokeStyle: "solid", //线样式
    });
    //此方法会跳到划线的位置
    this.map.setFitView();
  },

  beforeDestroy() {},

  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
</style>
